<template>
  <vxe-select
    ref="dateFormatRef"
    v-model="val1"
    placeholder="请选择字段"
    size="normal"
    filterable
    @change="updateParent"
  >
    <vxe-option value="YYYY" label="年 (YYYY）" />
    <vxe-option value="YYYYMM" label="年月（YYYYMM）" />
    <vxe-option value="YYYYMMDD" label="年月日（YYYYMMDD）" />
    <vxe-option value="YYYYMMDDHH" label="年月日时（YYYYMMDDHH）" />
    <vxe-option value="YYYYMMDDHHmm" label="年月日时分（YYYYMMDDHHmm）" />
    <vxe-option value="YYYYMMDDHHmmss" label="年月日时分秒（YYYYMMDDHHmmss）" />
<!--    <vxe-option :value="customVal" :label="customVal">-->
<!--      <template #default>-->
<!--        <span class="vxe-option-label">-->
<!--          <vxe-input-->
<!--            ref="customInputRef"-->
<!--            type="text"-->
<!--            class="data-input-custom"-->
<!--            v-model="customVal"-->
<!--            prefix-icon="vxe-icon-edit"-->
<!--            placeholder="自定义格式, 如: YYYYMMDDHHmmss"-->
<!--            size="mini"-->
<!--            clearable-->
<!--            @blur="handleInput"-->
<!--            @click.stop.prevent="dateFormatRef.visible = true"-->
<!--          />-->
<!--          <i class="vxe-icon-check"></i>-->
<!--        </span>-->
<!--      </template>-->
<!--    </vxe-option>-->
  </vxe-select>
</template>

<script lang="ts" setup>
import { dateUtil } from '@/utils/dateUtil'

defineOptions({ name: 'SnDate' })

const props = defineProps<{
  modelValue: any
}>()

const val1 = ref(props.modelValue.value)
//
const dateFormatRef = ref(null)
// const customInputRef = ref({
//   visible: true
// })
//
// const handleInput = (evt) => {
//   // 这里可以添加逻辑来处理输入，但不需要特殊处理空格，因为默认情况是允许输入空格的
//   customVal.value = evt.value
//   val1.value = customVal.value
//   updateParent()
// }

// const customVal = val1

const emit = defineEmits(['update:data'])
const updateParent = () => {
  const now = dateUtil()
  const date = now.format(val1.value)
  emit('update:data', {
    label: date,
    value: val1.value
  })
}
</script>

<style scoped>
.vxe-option-label {
  input {
    width: 100%;
    margin: 5px 10px;
  }
}

.data-input-custom {
  width: 200px;
  margin-right: 15px;
}
</style>
